<!--
 * @FileDescription: 教师待办弹窗
 * @Author: 夏世龙
 * @Date: 2021-10-11
 * @LastEditors: 夏世龙
 * @LastEditTime: 2021-10-11 16:11
 -->
<template>
  <div>
    <el-dialog
      title="操作批注"
      :visible.sync="RecordDialog"
      width="40%"
      :before-close="handleClose"
      >
      <span v-for="(record,index) in recordData" :key="index">
        <div>
          <el-row>
            <el-col :span="6">
              <p style="text-align: left;">操作人:{{record.name}}</p>
            </el-col>
            <el-col :span="6">
              <p style="text-align: left;">工号:{{record.gh}}</p>
            </el-col>
            <el-col :span="12">
              <p>操作时间:{{record.time}}</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <p style="text-align: left;margin:0 0 0 40px;">执行操作:{{GlobalMapProApproval(record.state)}}</p>
            </el-col>
            <el-col :span="24">
              <p style="text-align: left;font-size:20px;margin: 20px 0 0 0;">评语:{{record.message}}</p>
            </el-col>
          </el-row>
          <hr>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="RecordDialog = false">取 消</el-button>
        <el-button type="primary" @click="RecordDialog = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="visible" :show-close="false" width="50%" :modal="true" :close-on-click-modal="false"  >
      <h2 slot="title">待办事项</h2>
       <el-collapse  accordion>
         <el-collapse-item title="退回未填写项目" name="1">
            <el-table
                   height="300px"
                  :header-cell-style="{background:'#eef1f6',color:'#606266','text-align':'center'}"
                  :cell-style="{'text-align':'center'}"
                  :data="$store.state.todoList.backList"
                   style="width: 100%">
                  <el-table-column
                    prop="name"
                    label="项目名称"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="timeEnd"
                    label="结束时间"
                    >
                  </el-table-column>
                  <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" @click="checkRecord(scope.row)">批注</el-button>
                        <el-button size="mini" type="success" @click="editProject(scope.row)">修改</el-button>
                    </template>
                  </el-table-column>
                </el-table>
         </el-collapse-item>
         <el-collapse-item title="阶段未填写批次" name="2">
              <el-table
                    height="300px"
                    style="width: 100%"
                    :header-cell-style="{background:'#eef1f6',color:'#606266','text-align':'center'}"
                    :cell-style="{'text-align':'center'}"
                    :data="$store.state.todoList.phaseList"
                    >
                    <el-table-column
                      prop="phaseName"
                      label="阶段检查名称"
                      >
                    </el-table-column>
                    <el-table-column
                      label="操作">
                      <template slot-scope="scope">
                          <el-button size="mini" type="success" @click="phaseDeclare(scope.row)">申报</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
         </el-collapse-item>
         <el-collapse-item title="结项未填写批次" name="3">
                <el-table
                      height="300px"
                      :header-cell-style="{background:'#eef1f6',color:'#606266','text-align':'center'}"
                      :cell-style="{'text-align':'center'}"
                      :data="$store.state.todoList.closeList"
                      style="width: 100%">
                      <el-table-column
                        prop="phaseName"
                        label="结项检查名称"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="batchName"
                        label="批次名称"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="proName"
                        label="项目名称"
                        >
                      </el-table-column>
                      <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success" @click="phaseDeclare(scope.row)">申报</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
         </el-collapse-item>
       </el-collapse>
      <div slot="footer" class="buttons-wrap">
        <el-button type="danger" @click="cancelModal">关闭</el-button>
        <el-button type="primary" @click="cancelModal">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    created() {
      this.getTeacherDealt()
    },
    data(){
      return {
         RecordDialog:false,
         backList:[],
         phaseList:[],
         closeList:[],
         recordData:[]
      }
    },
    methods: {
      checkRecord(row){
        console.log(row)
        this.RecordDialog=true
        this.$api.project.getRecordByProId({
          proId:row.id
        }).then((res)=>{
          this.recordData=res.data.data.sort((a,b)=>{
              return a.time<b.time ? 1 : -1
          })
          console.log(this.recordData)
        })
      },
      handleClose(){
        this.RecordDialog=false
      },
      phaseDeclare(row){
        //延期申报和阶段申报
        this.cancelModal()
        this.$router.push({path:'/phaseDeclare',query:{phaseId:row.ptId,proId:row.proId}})
      },
      editProject(row){
        this.cancelModal()
        this.$router.push({path:'/declareEdit',query:{batch_id:row.batchId,level_id:row.levelId,classify:row.classifyName,projectId:row.id}})
      },
      cancelModal(){
        // 关闭弹窗，触发父组件修改visible值
        this.getTeacherDealt()
        this.$emit('update:visible', false);
      },
      getTeacherDealt(){
            this.$store.commit('getTodoList')
        }
      }
    }
</script>
<style scoped>

</style>
